<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  引入css  -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/treegrid/jquery.treegrid.css"/>
</head>
<body>
<div>
    <table id="menu-table"></table>
</div>
<!-- 引入js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.extension.js"></script>
<script src="bower_components/treegrid/jquery.treegrid.min.js"></script>
<script src="bower_components/treegrid/tree.table.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
    var columns = [
        {
            field : 'selectItem',
            radio : true
        },
        {
            title : '菜单ID',
            field : 'id',
            align : 'center',
            valign : 'middle',
            width : '80px'
        },
        {
            title : '菜单名称',
            field : 'name',
            align : 'center',
            valign : 'middle',
            width : '130px'
        },
        {
            title : '上级菜单',
            field : 'parentName',
            align : 'center',
            valign : 'middle',
            sortable : true,
            width : '100px'
        },
        {
            title : '类型',
            field : 'type',
            align : 'center',
            valign : 'middle',
            width : '70px',
            formatter : function(item, index) {
                if (item.type == 1) {
                    return '<span class="label label-success">菜单</span>';
                }
                if (item.type == 2) {
                    return '<span class="label label-warning">按钮</span>';
                }
            }
        },
        {
            title : '排序号',
            field : 'sort',
            align : 'center',
            valign : 'middle',
            sortable : true,
            width : '70px'
        },
        {
            title : '菜单URL',
            field : 'url',
            align : 'center',
            valign : 'middle',

            width : '160px'
        },
        {
            title : '授权标识',//要显示的标题名称
            field : 'permission',//json串中的key
            align : 'center',//水平居中
            valign : 'middle',//垂直居中
            sortable : false //是否排序
        } ];//格式来自官方demos -->treeGrid

    var treeTable=new TreeTable("menu-table","/menu/doFindObjects",columns);
    treeTable.init();
</script>
</body>
</html>